<template>
  <div class="comp-newsdetail-info-wrapper">
    <div class="header">
      <a href="./list.vue">{{ headerInfo.infoA }}</a>
      <h3>{{ headerInfo.infoH3 }}</h3>
      <p>{{ headerInfo.infoP }}</p>
    </div>
    <div class="contant">
      <p>
        {{ contantInfo.infoP1 }}
      </p>
      <div class="contantImg"><img src="@/assets/image/1.png" alt="" /></div>
      <p>
        <strong>{{ contantInfo.infoStrong1 }}</strong
        >{{ contantInfo.infoP2 }}
      </p>
      <h4>{{ contantInfo.infoH4 }}</h4>
      <p>
        {{ contantInfo.infoP3 }}
      </p>
      <p class="zhangLiang">{{ contantInfo.infoP4 }}</p>
      <p>
        <strong>{{ contantInfo.infoStrong2 }}</strong
        >{{ contantInfo.infoP5 }}
      </p>
      <p class="yxhb">{{ contantInfo.infoP6 }}</p>
      <p class="date">{{ contantInfo.infoP7 }}</p>
    </div>
    <div class="footer">
      <a href="#">{{ contantInfo.footerA1 }}</a>
      <a href="#">{{ contantInfo.footerA2 }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewsInfoText",
  props: {
    headerInfo: {
      type: Object,
      default: {},
    },
    contantInfo: {
      type: Object,
      default: {},
    },
  },
};
</script>

<style scoped lang="less">
.comp-newsdetail-info-wrapper {
  width: 1200px;
  margin: 0 auto;
  .header {
    overflow: hidden;
    border-bottom: 2px #f4f5f6 solid;
    a {
      float: right;
      padding: 45px 0;
    }
    h3 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20px;
      margin-top: 100px;
    }
    p {
      color: #999999;
      padding-bottom: 38px;
    }
  }
  .contant {
    margin-top: 100px;
    margin-bottom: 100px;
    line-height: 32px;
    font-size: 16px;
    text-align: left;
    .contantImg {
      width: 150px;
      height: 150px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      padding-top: 50px;
    }
    .zhangLiang {
      text-align: center;
    }
    .yxhb,
    .date {
      text-align: right;
    }
  }
  .footer {
    padding: 35px 48px;
    border-top: 2px #f4f5f6 solid;
    a {
      display: block;
      text-align: left;
      margin-bottom: 30px;
      font-size: 14px;
      color: black;
    }
    a:hover {
      color: #3880e7;
    }
  }
}
</style>